@import "./var.scss";

//公共状态样式
@mixin commonStatusStyle(){
  display: inline-flex;
  padding: 2px 3px;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  height: 18px;
  line-height: 20px;
  border-radius: 3px;
}

/*所有状态的公共颜色class调用*/
//待完成状态
.status-tag-todo {
  color: var(--yt-status-todo-color);
  border:1px solid #CDCDCD;
  background-color: #F2F2F2;
  @include commonStatusStyle;
}
//进行中状态
.status-tag-doing {
  color: var(--yt-status-doing-color);
  border:1px solid #FFCEAF;
  background-color: #FFF0E6;
  @include commonStatusStyle;
}
//已完成状态
.status-tag-complete {
  color: var(--yt-status-complete-color);
  border:1px solid #9CFFA6;
  background-color: #DAFFDD;
  @include commonStatusStyle;
}
//已否定状态
.status-tag-false {
  color: var(--yt-status-false-color);
  border:1px solid #FFC0C0;
  background-color: #FFEDED;
  @include commonStatusStyle;
}


/*所有文字按钮的颜色class调用*/
.el-button.is-link,.el-button.el-button--text {
  //默认文字按钮颜色
  &.el-button--primary, &.yt-btn-color-default {
    color: var(--yt-btn-color-default);
    &:hover{
      opacity: 0.6;
    }
  }

  //禁止 类型文字按钮颜色
  &.yt-btn-color-not-allow {
    color: var(--yt-btn-color-not-allow);
  }

  //通过类型文字按钮颜色
  &.yt-btn-color-yes {
    color: var(--yt-btn-color-yes);
  }

  //警告类型文字按钮颜色
  &.yt-btm-color-warning {
    color: var(--yt-btm-color-warning);
  }

  //删除，危险操作类型文字按钮颜色
  &.yt-btn-color-danger {
    color: var(--yt-btn-color-danger);
    &:focus, &:active{
      color: var(--yt-btn-color-danger);
    }
  }
}


/*筛选区域表格区分割线*/
.split-line{
  border-top:1px solid #dfe6ec;
  margin: 15px -20px;
}

/* flex 水平垂直居中 */
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*flex分散垂直居中*/
.flx-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*flex垂直居中*/
.flx-align-center {
  display: flex;
  align-items: center;
}

/* clearfix 清楚浮动 */
.clearfix::after {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
  content: "";
}

/* 文字单行省略号 */
.sle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 文字多了自动換行 */
.break-word {
  word-break: break-all;
  word-wrap: break-word;
}

/* fade-transform 淡入淡出动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s;
}
.fade-transform-enter-from {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(30px);
}

/*浮动*/
.f-l{
  float:left;
}
.f-r{
  float:right;
}


/*UI3.0需求树形控件的选中节点的父级也需要半高亮（备注：业务代码实现，场景很少）*/
.el-tree--highlight-current {
  .el-tree-node:has(.el-tree-node__children > .is-current){
    >.el-tree-node__content{
      background-color: rgba(236, 245, 255, 0.5);
    }
  }
}